<template>
  <div>
    <SearchForm
      v-model="query"
      :options="searchOptions"
      @search="getData"
    ></SearchForm>
    <div>
      <n-button type="primary" @click="handleAdd()">新增</n-button>
    </div>
    <n-data-table
      :columns="columns"
      :data="treeData"
      :pagination="false"
      :bordered="false"
    />

    <MenuForm ref="form" @refresh="getData"></MenuForm>
  </div>
</template>
<script lang="tsx" setup>
import {
  useSysMenuApi,
  type SysMenuPageQuery,
  type SysMenuItem,
} from '@/api/system/menu';
import { NButton, type SelectOption } from 'naive-ui';
import { SvgIcon } from '@code4x/naive-components';
import { SearchForm, type SearchFormOptions } from '@code4x/naive-components';
defineOptions({ name: 'SystemMenu' });
const typeOptions: SelectOption[] = [
  { label: '全部', value: undefined },
  { label: '目录', value: 1 },
  { label: '页面', value: 2 },
  { label: '外链', value: 3 },
];
const query = ref<SysMenuPageQuery>({
  title: '',
  code: null,
  codeEnd: null,
  type: null,
});
const searchOptions: SearchFormOptions[] = [
  {
    type: 'input',
    label: '菜单标题',
    path: 'title',
  },
  {
    type: 'date',
    label: '菜单编码',
    path: 'code',
    pathEnd: 'codeEnd',
  },
  {
    type: 'select',
    label: '菜单类型',
    path: 'type',
    contentAttrs: {
      options: typeOptions,
    },
  },
];

const MenuForm = defineAsyncComponent(() => import('./form.vue'));

const treeData = ref<SysMenuItem[]>([]);
const columns = ref([
  {
    title: '菜单标题',
    key: 'title',
    render: (row: SysMenuItem) => {
      if (row.icon) {
        return (
          <span class="inline-flex">
            <SvgIcon name={row.icon}></SvgIcon>
            <span>{row.title}</span>
            {/* <n-tag type="info" round bordered={false} size="small">
              {row.type === 1 ? '目录' : row.type === 2 ? '页面' : '外链'}
            </n-tag> */}
          </span>
        );
      }
      return <span>{row.title}</span>;
    },
  },
  { title: '菜单编码', key: 'code' },
  { title: '菜单地址', key: 'url' },
  { title: '权限接口', key: 'api' },
  {
    title: '菜单类型',
    width: 120,
    key: 'type',
    render: (row: SysMenuItem) => {
      return (
        <n-tag type="info" round bordered={false}>
          {row.type === 1 ? '目录' : row.type === 2 ? '页面' : '外链'}
        </n-tag>
      );
    },
  },
  {
    title: '是否启用',
    key: 'enabled',
    width: 120,
    render: (row: SysMenuItem) => {
      return (
        <n-tag type={row.enabled ? 'success' : 'error'} round bordered={false}>
          {row.enabled ? '启用' : '禁用'}
        </n-tag>
      );
    },
  },
  {
    title: '是否隐藏',
    key: 'hidden',
    width: 120,
    render: (row: SysMenuItem) => {
      return (
        <n-tag type={row.hidden ? 'success' : 'error'} round bordered={false}>
          {row.hidden ? '隐藏' : '显示'}
        </n-tag>
      );
    },
  },
  {
    title: '是否缓存',
    key: 'keepalive',
    width: 120,
    render: (row: SysMenuItem) => {
      return (
        <n-tag
          type={row.keepalive ? 'success' : 'error'}
          round
          bordered={false}
        >
          {row.keepalive ? '启用' : '禁用'}
        </n-tag>
      );
    },
  },
  { title: '排序', key: 'sort', width: 120 },
  {
    title: '操作',
    key: 'url',
    width: '10em',
    className: 'flex gap-x-8px',
    render: (row: SysMenuItem) => {
      return [
        <n-button onClick={() => handleAppend(row)} type="primary">
          插入
        </n-button>,
        <n-button onClick={() => handleEdit(row)} type="primary">
          编辑
        </n-button>,
        <n-popconfirm
          onPositiveClick={() => handleDel(row)}
          v-slots={{
            default: () => <span>是否删除？</span>,
            trigger: () => (
              <n-button
                type="error"
                disabled={
                  Array.isArray(row.children) && row.children.length > 0
                }
              >
                删除
              </n-button>
            ),
          }}
        ></n-popconfirm>,
      ];
    },
  },
]);
const form = ref();
const handleAdd = () => {
  form.value.init(undefined);
};
const handleAppend = (row: SysMenuItem) => {
  form.value.init(row.menuId, true);
};
const handleEdit = (row: SysMenuItem) => {
  form.value.init(row.menuId);
};
const handleDel = (row: SysMenuItem) => {
  useSysMenuApi.delete(row.menuId).then(() => {
    getData();
    window.$message.success(`[${row.title}]已删除！`);
  });
};
const getData = () => {
  useSysMenuApi.tree(query.value).then((res) => {
    treeData.value = res.data;
  });
};

onBeforeMount(() => {
  getData();
});
</script>
<style lang="scss"></style>
